<template>
  <div>
    <!-- 我们去买一台笔记本,有活动,给你一个优惠劵,要以让用户自己去选 -->
    <!-- 要么升级内存,要么升级硬盘 -->
    <!-- 作用域插槽:当我们组件中有一块内容是不确定的,但是数据是由
    子组件提供的,就可以用作用域插槽 -->
    <!-- 儿子本来是直接买好了礼物,可能父亲不喜欢,所以改变策略 -->
    <!-- 直接给父亲钱,父亲也就是用户自己来决定这块长什么样子 -->
    <!-- 作用域插槽三要素
    1. 这块内容不确定的 所以必须是插槽
    2. 数据是由子组件提供的,插槽的属性传
    3. 呈现方式是由用户自己来决定的 -->
    <MyCom>
      <template #default="scope">
        {{ scope.flag }}
      </template>
    </MyCom>

    <MyCom>
      <template #default="scope">
        {{ scope.flag ? "正确" : "错误" }}
      </template>
    </MyCom>

    <MyCom>
      <template #default="scope">
        <button style="color: green" v-if="scope.flag === true">正确</button>
        <button style="color: red" v-else>错误</button>
      </template>
    </MyCom>

    <hr />
    <MyTable :data="list">
      <template #default="scope">
        <button style="color: green" v-if="scope.row.done === true">
          正确
        </button>
        <button style="color: red" v-else>错误</button>
      </template>
    </MyTable>
  </div>
</template>

<script>
// 高级的组件
import MyCom from "@/components/MyCom.vue";
import MyTable from "@/components/MyTable.vue";
export default {
  components: {
    MyCom,
    MyTable,
  },
  data() {
    return {
      list: [
        { id: 1, name: "吃饭", done: false },
        { id: 2, name: "睡觉", done: true },
        { id: 3, name: "打豆豆", done: false },
      ],
    };
  },
  methods: {},
};
</script>

<style scoped></style>
